// 检查项组件
<template>
  <div class="v-check-list">
    <div class="title">{{data[content]}}</div>
    <ul>
      <li v-for="(item,index) in data.children" :key="item[bizType]+index">
        <div class="left-box"><span style="color:#F15A5A;" v-if="item.isMustUpload">*</span>{{item[name]}}</div>
        <div class="right-box">
          <qm-file-upload :ref="item[bizType]+index"
                          :uploadId="item[bizType]+uploadId+index+dataKey"
                          :galleryOptions="galleryOptions"
                          :actionsOneGroup="actionsOneGroup"
                          :extensions="extensions"
                          :accept="accept"
                          :disabled="disabled"
                          :isDefaultFile="true"
                          :defaultFiles="item.attachments"
                          @onSuccess="(file)=>onSuccess(file,index)"
                          @deleteFileAfter="(listIndex,attachmentId)=>deleteFileAfter(listIndex,attachmentId,index)"
                          :params="{type:'attach', dataKey: dataKey, bizType: item[bizType]}">
          </qm-file-upload>
        </div>
      </li>
    </ul>
    <div style="margin-top:8px;"><slot></slot></div>
  </div>
</template>

<script>
export default {
  name:'',
  props:{
    // 展示的数据，对象类型，里面有一个检查项的数组
    data:{
      type:Object,
      default: () => {
        return {};
      },
    },
    // 附件option
    galleryOptions:{
      type:Object,
      default: () => {
        return {};
      },
    },
    // 上传方式的选择 1相册 2拍照 3文件
    actionsOneGroup: {
      type: Array,
      default: () => [1, 2],
    },
    extensions: {
      type: String,
      default:'jpg,jpeg,png'
    },
    accept: {
      type: String,
      default:'.jpg,.jpeg,.png'
    },
    // 附件主键
    dataKey:{
      type:String,
      require:true
    },
    // bizType
    bizType:{
      type:String,
      default:'bizType'
    },
    // 检查项名称
    name:{
      type:String,
      default:'customName'
    },
    // 检查项大标题
    content:{
      type:String,
      default:'customName'
    },
    // 是否显示上传按钮
    disabled:{
      type:Boolean,
      default:false
    },
    uploadId:{
      type:String,
    }
  },
  data () {
    return {
      myData:{}
    }
  },
  created () {
    this.myData={}
    this.myData=JSON.parse(JSON.stringify(this.data))
  },
  methods: {
    getFileRequire(){
      let a=0
      this.data.children.forEach((item,index)=>{
        if(this.$refs[item[this.bizType]+index][0].getUploadedCount()>0){
          a++
        }
      })
      return a>0?true:false
    },
    onSuccess(file,index){
      // if(!this.myData.detectDictItems[index].attachmentIds) this.myData.detectDictItems[index].attachmentIds=[]
      // this.myData.detectDictItems[index].attachmentIds.push(file.key)
      // this.$emit('successUpload',this.myData)
    },
    deleteFileAfter(listIndex,attachmentId,index){
      // let findIndex=this.myData.detectDictItems[index].attachmentIds.indexOf(attachmentId)
      // this.myData.detectDictItems[index].attachmentIds.splice(findIndex,1)
      // this.$emit('deleteUploadFile',this.myData)
    },
  },
}
</script>

<style lang="less" scoped>
@deep: ~">>>";
@mainColor:#1990FF; // 步骤条主题颜色
div,span,p,ul{
  word-break: break-all;
  margin: 0;
  padding: 0;
}
.v-check-list{
  .title{
    color: #333333;
    font-size: 14px;
    margin-bottom: 10px;
  }
  ul{
    li{
      padding: 8px 12px;
      background: rgba(215, 220, 228, 0.2);
      color: #61677A;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 3px;
      margin-bottom: 8px;
      &:last-child{
        margin-bottom: 0;
      }
      .left-box{
        flex-shrink: 0;
        margin-right: 10px;
        flex: 1;
      }
      .right-box{
        max-width: 50%;
      }
    }
  }
}
/deep/ .pic_upload{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  span,img,div.img-div{
    width: 26px!important;
    height: 26px!important;
  }
  span{
    margin: 5px;
  }
  .f7-icons {
    font-size: 16px;
  }
  .demo-gauge{
    left: 50%!important;
    transform: translateX(-50%);
    margin-left: 0!important;
  }
  .gauge-svg, .gauge svg{
    width: 22px;
  }
}
</style>